<script setup lang="ts">
import {onMounted, ref, toRef} from "vue";
import {reqOrderInfo, reqCancelOrder, reqQrCode,reqQueryState} from "@/api/user/user.ts";
import {useRoute} from "vue-router";
import type {OrderResponseData,OrderDetailData,QrCode} from '@/api/user/type.ts'
import {ElMessage} from "element-plus";
//生成二维码插件
//@ts-ignore
import QRCode from 'qrcode'
const $route =useRoute()
onMounted(()=>{
  getOrderInfo(orderId as string)
})
let orderId =$route.query.orderId
let orderInfo = ref<OrderDetailData>()
/**
 * 获取订单信息
 */
async function getOrderInfo(orderId: string){
  let res:OrderResponseData = await reqOrderInfo(orderId as string)
  // console.log(res)
  if(res.code==200){
    orderInfo.value=res.data
  }
}
/**
 * ================这个接口暂时用不了==============
 * 取消订单
 */
async function cancel(){
  try{
    // console.log(orderId)
    let res:any = await reqCancelOrder(orderId as string)
    // console.log(res)
    if(res.code==200){
      await getOrderInfo(orderId as string)
    }
  }catch (e) {
    ElMessage({type:'error',message:'预约失败'})
  }
}

let dialogVisible= ref<boolean>(false)
let timer = ref<any>()
//定义存储二维码图片路径
let imgUrl = ref<string>('')
/**
 * 展示支付对话框
 */
async function showPayQr(){
  dialogVisible.value=!dialogVisible.value
  let res:QrCode = await reqQrCode($route.query.orderId)
  // 根据服务器返回二维码信息生成二维码图片
  imgUrl.value = await QRCode.toDataURL(res.data.codeUrl);
  // console.log(qrRes)
  //询问服务器当前这笔交易的支付结果
  //主要二维码展示，每隔几秒询问服务器是否支付成功
   timer.value = setInterval(async () => {
    let res = await reqQueryState($route.query.orderId as string)
    if(res.data){
      dialogVisible.value=false
      ElMessage({type:'success',message:'支付成功！'})
      clearInterval(timer.value)
    //   在此获获取订单详情
      await getOrderInfo(orderId as string)
    }
    // console.log(res)
  },1000)
}
function closeDialog(){
  dialogVisible.value=false
  clearInterval(timer.value)
}

</script>

<template>
<div class="detail">
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <span class="tit">挂号详情</span>
      </div>
    </template>
      <div class="t">
        <div class="waiting">
          <el-tag
            type="success"
            effect="dark"
            :size="'large'"
          >√{{orderInfo?.param?.orderStatusString}}</el-tag>
        </div>
        <div class="qr">
          <img src="@/assets/images/code_login_wechat.png" alt="图片">
          <p>微信关注”北京114预约挂号“<br>”快速预约挂号“</p>
        </div>
      </div>
      <div class="center">
        <div class="descriptions_item">
          <el-descriptions
              direction="horizontal"
              :column="1"
              border
              class="descriptions"
          >
            <el-descriptions-item label="就诊人信息">{{orderInfo?.patientName}}</el-descriptions-item>
            <el-descriptions-item label="就诊日期">{{orderInfo?.reserveDate}}</el-descriptions-item>
            <el-descriptions-item label="就诊医院">{{orderInfo?.hosname}}</el-descriptions-item>
            <el-descriptions-item label="就诊科室">{{orderInfo?.depname}}</el-descriptions-item>
            <el-descriptions-item label="医生职称">{{orderInfo?.title}}</el-descriptions-item>
            <el-descriptions-item label="医事服务费">{{orderInfo?.amount}}</el-descriptions-item>
            <el-descriptions-item label="挂号单号">{{orderInfo?.outTradeNo}}</el-descriptions-item>
            <el-descriptions-item label="挂号时间">{{orderInfo?.createTime}}</el-descriptions-item>
          </el-descriptions>
          <div class="btns" v-if="orderInfo?.orderStatus==1||orderInfo?.orderStatus==0">
            <el-popconfirm title="确认取消预约吗?" @confirm="cancel">
              <template #reference>
                <el-button >取消预约</el-button>
              </template>
            </el-popconfirm>
            <el-button class="button" type="primary" v-if="orderInfo?.orderStatus==0" @click="showPayQr">支付</el-button>
          </div>
        </div>
        <el-card class="box-card" :shadow="'never'">
          <template #header>
            <div class="card-header">
              <span>注意事项</span>
            </div>
          </template>
          <div>
            <ul>
              <li>1.请确认就诊人信息是否准确，若填写错误将无法取号就诊，损失由本人承担；</li>
              <li style="color: #d70000;">2.【取号】就诊当天需在{{orderInfo?.fetchTime}}前
                在医院取号，未取号视为爽约，该号不退不换；</li>
              <li>3.【退号】在{{orderInfo?.fetchAddress}}前可在线退号 ，逾期将不可办理退号退费；</li>
              <li>4.北京114预约挂号支持自费患者使用身份证预约，同时支持北京市医保患者使用北京社保卡在平台预约挂号。请于就诊当日，携带预约挂号所使用的有效身份证件到院取号；</li>
              <li>5.请注意北京市医保患者在住院期间不能使用社保卡在门诊取号。</li>
            </ul>
          </div>
        </el-card>
      </div>
  </el-card>
  <el-dialog
      v-model="dialogVisible"
      title="请用微信扫码支付"
      width="20%"
      @close="closeDialog"
  >
    <div class="Qr">
      <img :src="imgUrl" alt="">
      <p>请使用微信扫一扫</p>
      <p>扫描二维码支付</p>
    </div>
    <template #footer>
    <span class="dialog-footer">
      <el-button type="primary" @click="closeDialog">关闭窗口</el-button>
    </span>
    </template>
  </el-dialog>
</div>
</template>

<style scoped lang="scss">
.detail{
  padding: 30px 30px;
  .tit{
    font-size: 20px;
  }
  .t{
    display: flex;
    justify-content: space-between;
    border-bottom:1px solid #d9d9d9;
    padding-bottom: 20px;
    .qr{
      display: flex;
      img{
        width: 48px;
        height: 48px;
      }
      p{
        margin-left: 5px;
        line-height: 1.5em;
      }
    }

  }
  .center{
    padding-top: 20px;
    display: flex;
    justify-content: space-between;
    .descriptions_item{
      width: 38%;
      .descriptions{
        margin-bottom: 10px;
      }
    }
    .box-card{
      width: 58%;
      ul li{
        line-height: 1.5em;
      }
    }
  }
  ::v-deep(.el-dialog__body){
    border-top: 1px solid #e0e0e0;
    border-bottom: 1px solid #e5e5e5;
  }
  .Qr{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    img{
      width: 256px;
      height: 256px;
    }
    p{
      line-height: 1.6em;
    }
  }
}

</style>